<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";
import Leader from "./components/Leader.vue";
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  data(){
    return{
      msg:"你好",
      studentName:'',
      schoolName:'',
      leaderName:'',
    }
  },
  components:{HelloWorld, Student,School,Leader},
  methods:{
    getSchoolName(name){
      console.log('getSchoolName');
      this.schoolName = name;
    },
    getStudentName(name){
      console.log('getStudentName');
      this.studentName = name;
    },
    getLeaderName(name){
      console.log('getLeaderName');
      this.leaderName = name;
    }
  },
  mounted() {
    this.$refs.leader.$once('leaderEvent',this.getLeaderName)
    //this.$refs.leader.$on('leaderEvent',(name)=>this.leaderName=name);
  },
  destroyed() {
    //销毁时,自动解绑自己集其所有子组件的所有自定义组件,下无需下面代码
    this.$off('leaderEvent')
    this.$off(['leaderEvent','studentEvent'])
    this.$off()
  }
}
</script>

<template>
  <div>
    <h1>{{msg}}，   学生姓名：{{studentName}};   学校：{{schoolName}};   校长:{{leaderName}}</h1>
    <hr>
    <School v-on:schoolEvent="getSchoolName"></School>
    <hr>
    <Student @studentEvent="getStudentName"></Student>
    <hr>
    <Leader ref="leader" @click.native="msg = '36345634634'"></Leader>/
  </div>

</template>

<style scoped>

</style>
